<template>
  <section>
    <div class="book-info">
      <div class="d-flex flex-wrap-wrap sort-list justify-content-between align-items-center ">
        <div v-for="sortVo in booksVo.sortVoList" :key="sortVo.id">
          <span>{{sortVo.sortName}}</span>
        </div>
      </div>
      <div class="cover">
        <img v-lazy="booksVo.booksCover" alt="">
        <h2 class="text-center">{{booksVo.booksName}}</h2>
      </div>
    </div>
    <div class="discuss text-center">
      <star :number="discussMap.avgStar" :disabled="true"></star>
    </div>
  </section>
</template>

<script>
import {getBooksById} from 'api/BooksApi'
import {findTotalsByBookId} from 'api/DiscussApi'
import axios from 'axios'

import Star from './Star'
export default {
  name: 'BookInfo',
  props: {
    bookId: String
  },
  data () {
    return {
      booksVo: {},
      discussMap: {}
    }
  },
  components: {
    Star
  },
  methods: {
    getBooksById () {
      return getBooksById({id: this.bookId})
    },
    findTotalsByBookId () {
      return findTotalsByBookId({
        bookId: this.bookId
      });
    },
    findAll() {
      axios.all([
        this.findTotalsByBookId(),
        this.getBooksById()
        ]).then(axios.spread((totalRes, booksRes) => {
          if(totalRes.meta.success) {
            this.discussMap = totalRes.data
          }
          if(booksRes.meta.success) {
            this.booksVo = booksRes.data
          }
        }));
    }
  },
  created () {
    this.findAll();
  }
}
</script>
<style lang="stylus" scoped>
@import '~assets/css/style.styl';

section {
  background #FFF
  height 40vh

  .book-info {
    position relative
    height 30vh

    .sort-list {
      height 18vh
      background: linear-gradient(to bottom right, $colorAccount , #546e7a);
      div {
        width 40vw
        line-height 15px
        text-align center
        span {
          border: 1px solid #ccc;
          border-radius: 2px;
          padding: 2px 8px;
          color #FFF
          font-size 14px
        }
      }
    }
    .cover {
      width 26vw
      height 34vw

      position absolute
      left 35vw
      top 20px

      img {
        width 100%
        height 100%
      }

      h2 {
        font-size 18px
        font-weight 400
        margin-top 15px
        ellipsis()
      }
    }
  }
}
</style>
